<nz-card class="list_card" [nzTitle]="cardTitle" [nzExtra]="extraTemplate">
  <!-- 检索表单 -->
  <form nz-form [nzLayout]="'vertical'" (ngSubmit)="refresh()">
    <nz-row nzGutter="8">
      <nz-col nzSm="12">
        <nz-form-item>
          <nz-form-label>
            姓名或用户名
          </nz-form-label>
          <nz-form-control>
            <nz-input-group nzSearch [nzSuffix]="suffixButton">
              <input type="text" nz-input [(ngModel)]="filterText" (keyup.enter)="refresh()" name="filterText"
                [placeholder]="'搜索...'">
              <ng-template #suffixButton>
                <button nz-button nzType="primary" nzSearch type="submit">
                  <i class="anticon anticon-search"></i>
                  <!-- {{l('Search')}} -->
                </button>
              </ng-template>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzSm="12">
        <nz-form-item>
          <nz-form-label>
            角色
          </nz-form-label>
          <nz-form-control>
            <role-combox [(selectedRole)]="role" (selectedRoleChange)="refresh()"></role-combox>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>
  </form>

  <nz-table #roleTable [nzFrontPagination]="false" [nzData]="tableHelper.records" [nzTotal]="tableHelper.totalRecordsCount"
    [(nzPageIndex)]="tableHelper.pageIndex" [(nzPageSize)]="tableHelper.defaultPageSize" [nzLoading]="tableHelper.isLoading"
    nzNoResult="暂无数据" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
    <thead (nzSortChange)="sort($event)">
      <tr>
        <th nzShowSort nzSortKey="userName">用户名</th>
        <th>角色</th>
        <th nzShowSort nzSortKey="emailAddress">邮箱地址</th>
        <th nzShowSort nzSortKey="isEmailConfirmed">邮箱验证</th>
        <th nzShowSort nzSortKey="isActive">激活</th>
        <th nzShowSort nzSortKey="lastLoginTime">上次登陆时间</th>
        <th nzShowSort nzSortKey="creationTime">创建时间</th>
        <th nzWidth="320px">操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-template ngFor let-data [ngForOf]="roleTable.data">
        <tr>
          <td>{{data.userName}}</td>
          <td>
            <span nz-tooltip [nzTitle]="getRolesAsString(data.roles)">
              <nz-tag *ngFor="let role of data.roles">
                {{role.roleName}}
              </nz-tag>
            </span>
          </td>
          <td>{{data.emailAddress}}</td>
          <td>
            <nz-switch [ngModel]="data.isEmailConfirmed" (ngModelChange)="clickIsEmailConfirmedSwitch(data)"
              nzCheckedChildren="是" nzUnCheckedChildren="否"></nz-switch>
          </td>
          <td>
            <nz-switch [ngModel]="data.isActive" (ngModelChange)="clickIsActiveSwitch(data)" nzCheckedChildren="是"
              nzUnCheckedChildren="否"></nz-switch>
          </td>
          <td>{{data.lastLoginTime ? (data.lastLoginTime | date:'yyyy-MM-dd') : '-'}}</td>
          <td>{{data.creationTime ? (data.creationTime | date:'yyyy-MM-dd') : '-'}}</td>
          <td class="table_operate">
            <!-- 编辑 -->
            <ng-container *ngIf="isGranted('Pages.Administration.Users.Edit')">
              <a (click)="editBuildingPlan(data)">
                <i nz-icon [type]="'edit'" theme="fill"></i> 编辑
              </a>
              <nz-divider nzType="vertical"></nz-divider>
            </ng-container>
            <!-- 删除 -->
            <ng-container *ngIf="isGranted('Pages.Administration.Users.Delete')">
              <nz-popconfirm nzTitle="是否确定删除此项？" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="deleteConfirm(data.id)">
                <a nz-popconfirm>
                  <i nz-icon [type]="'delete'" theme="fill"></i>
                  删除
                </a>
              </nz-popconfirm>
              <nz-divider nzType="vertical"></nz-divider>
            </ng-container>

            <!-- 更多 -->
            <ng-container>
              <nz-dropdown>
                <a nz-dropdown>
                  <i class="icon-options-vertical mr-sm"></i>
                  <span>更多...</span>
                  <i class="anticon anticon-down"></i>
                </a>

                <ul nz-menu>
                  <!-- (click)="tenantImpersonateLogin(data) -->
                  <!-- 暂时注释：因为租户登陆还没有走通 -->
                  <!-- <li nz-menu-item *ngIf="isGranted('Pages.Administration.Users.Impersonation') && data.id != appSession.userId">
                    <a nz-popconfirm>
                      <i nz-icon [type]="'login'" [theme]="'fill'"></i>
                      <span>使用这个用户登陆</span>
                    </a>
                  </li> -->
                  <li nz-menu-item *ngIf="isGranted('Pages.Administration.Users.Impersonation')">
                    <a (click)="editPermissionsBuildingPlan(data)">
                      <i nz-icon [type]="'permission'" [theme]="'fill'"></i>
                      <span>权限</span>
                    </a>
                  </li>
                </ul>
              </nz-dropdown>
            </ng-container>
          </td>
        </tr>
      </ng-template>
    </tbody>
  </nz-table>
</nz-card>

<ng-template #cardTitle>
  <div class="card_title">
    <i style="margin-right: 10px" nz-icon [type]="'user'" theme="fill"></i> 用户管理
  </div>
</ng-template>

<ng-template #extraTemplate>
  <div class="tab_operate">
    <a (click)="createBuildingPlan()">创建</a>
  </div>
</ng-template>